<!-- 使用例子：
 <pb-number-box :value.sync="order.quantity" :scale="0.7"></pb-number-box> -->

<template>
	<view class="pb-flex-row">
		<view class="minus pb-flex-column pb-cross-center pb-main-center" :style="minus_style"
			@click.stop="minusAction">
			<u-icon name="minus" :size="icon_font_size"></u-icon>
		</view>
		<input class="input" :style="input_style" :disabled="inputDisabled" type="number"
			:placeholder-style="'fontSize:'+icon_font_size" v-model="currentValue" @input="changeAction" />
		<view class="plus pb-flex-column pb-cross-center pb-main-center" :style="plus_style" @click.stop="plusAction">
			<u-icon name="plus" :size="icon_font_size"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: "pb-number-box",
		props: {
			value: {
				type: [Number, String],
				default: 1
			},
			minValue: {
				type: Number
			},
			maxValue: {
				type: Number
			},
			scale: {
				type: [Number, String],
				default: 1
			},
			inputDisabled: {
				type: Boolean,
				default: false
			},
			iconFontSize: {
				type: String,
				default: '32rpx'
			},
			minusStyle: {
				type: String,
				default: ''
			},
			inputStyle: {
				type: String,
				default: ''
			},
			plusStyle: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				currentValue: 1,
				icon_font_size: '32rpx',
				minus_style: '',
				input_style: '',
			};
		},
		watch: {
			value: {
				handler(newVal, oldVal) {
					this.currentValue = newVal
					this.$emit('update:value', this.currentValue)
				},
				immediate: true
			},
			minusStyle: {
				handler(newVal) {
					this.minus_style = newVal
				},
				immediate: true
			},
			inputStyle: {
				handler(newVal) {
					this.input_style = newVal
				},
				immediate: true
			},
			plusStyle: {
				handler(newVal) {
					this.plus_style = newVal
				},
				immediate: true
			},
			scale: {
				handler(newVal, oldVal) {
					if (newVal == 0) {
						newVal = 1
					}
					if (newVal != 1 || oldVal != undefined) {
						this.icon_font_size = `${32*newVal}rpx`
						this.minus_style =
							`height: ${60*newVal}rpx;width: ${60*newVal}rpx;line-height: ${60*newVal}rpx;`
						this.input_style =
							`font-size:${this.icon_font_size};height: ${60*newVal}rpx;width: ${80*newVal}rpx;line-height: ${60*newVal}rpx;`
						this.plus_style =
							`height: ${60*newVal}rpx;width: ${60*newVal}rpx;line-height: ${60*newVal}rpx;`
					}
				},
				immediate: true
			}
		},
		methods: {
			changeAction(e) {
				this.currentValue = parseInt(e.detail.value)
				if (this.minValue != null && this.currentValue < this.minValue) {
					this.currentValue = this.minValue
					uni.showToast({
						icon: 'none',
						title: `最小值不能小于${this.minValue}`
					})
				}
				if (this.maxValue != null && this.currentValue > this.maxValue) {
					this.currentValue = this.maxValue
					uni.showToast({
						icon: 'none',
						title: `最大值不能大于${this.maxValue}`
					})
				}
				this.$emit('update:value', this.currentValue)
				this.$emit('change', this.currentValue)
			},
			minusAction() {
				this.currentValue = parseInt(this.currentValue)
				this.currentValue -= 1
				if (this.minValue != null && this.currentValue < this.minValue) {
					this.currentValue = this.minValue
					uni.showToast({
						icon: 'none',
						title: `最小值不能小于${this.minValue}`
					})
				}
				this.$emit('update:value', this.currentValue)
				this.$emit('change', this.currentValue)
			},
			plusAction() {
				this.currentValue = parseInt(this.currentValue)
				this.currentValue += 1
				if (this.maxValue != null && this.currentValue > this.maxValue) {
					this.currentValue = this.maxValue
					uni.showToast({
						icon: 'none',
						title: `最大值不能大于${this.maxValue}`
					})
				}
				this.$emit('update:value', this.currentValue)
				this.$emit('change', this.currentValue)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.minus {
		height: 60rpx;
		width: 60rpx;
		line-height: 60rpx;
		border-radius: 8rpx 0 0 8rpx;
		border: 2rpx $uni-border-color solid;
		text-align: center;
		background-color: rgb(242, 243, 245);
	}

	.input {
		height: 60rpx;
		width: 80rpx;
		line-height: 60rpx;
		border-top: 2rpx $uni-border-color solid;
		border-bottom: 2rpx $uni-border-color solid;
		font-size: 32rpx;
		text-align: center;
		background-color: #fff;
	}

	.plus {
		height: 60rpx;
		width: 60rpx;
		line-height: 60rpx;
		border-radius: 0 8rpx 8rpx 0;
		border: 2rpx $uni-border-color solid;
		text-align: center;
		background-color: rgb(242, 243, 245);
	}
</style>